﻿@using WeddingEventManagementApp
@model WeddingEventManagement_API.Search_DTO

@{
    ViewBag.Title = "Search Results For '" + ViewBag.Query + "':";
}

<div class="nine columns">

    @if (Model.Clients.Count < 1 && Model.Events.Count < 1 && Model.Locations.Count < 1)
    {
        <div>
            <h4>No Results</h4>
            <div class="card card-blue">
                <p>Your search query for "@ViewBag.Query" yielded no results.</p>
            </div>
        </div>
    }

    @if (Model.Clients.Count > 0)
	{
		<div id="Clients" class="filterable">
            <h4>Clients</h4>
            <div class="card card-blue">
                <ul class="no-bullet">
                @foreach (var item in Model.Clients)
	            {
		            <li>
                        <a class="clearfix" href="@Url.Action("Details", "Client", new { id = item.ClientID } )">
                            <img class="left" src='@string.Format("https://www.gravatar.com/avatar/{0}?s={1}&d=identicon", Utility.MD5Hash(item.Email.Trim().ToLower()), 40)' />
                            <h5 class="left" style="margin-left: 15px;">@item.FirstName  @item.LastName</h5>
                        </a>
		            </li>
	            }
                </ul>
            </div>
        </div>
	}

    @if (Model.Events.Count > 0)
	{
		<div id="Events" class="filterable">
            <h4>Events</h4>
            <div class="card card-blue">
                <ul class="no-bullet">
                @foreach (var item in Model.Events)
	            {
		            <li>
                        <a href="@Url.Action("Details", "Event", new { id = item.EventID } )">
                            <h5 style="margin-bottom: 5px;">@item.Title</h5>
                            <strong>@item.StartDate.ToLongDateString() at @item.StartDate.ToShortTimeString()</strong>
                        </a>
		            </li>
	            }
                </ul>
            </div>
        </div>
	}

    @if (Model.Locations.Count > 0)
	{
		<div id="Locations" class="filterable">
            <h4>Locations</h4>
            <div class="card card-blue">
                <ul class="no-bullet">
                @foreach (var item in Model.Locations)
	            {
                    <li>
                        <a href="@Url.Action("Details", "Location", new { id = item.LocationID } )">
                            <h5 style="margin-bottom: 5px;">@item.Name</h5>
                            <strong>@item.StreetAddress, @item.City @item.Province @item.PostalCode</strong>
                        </a>
                    </li>
	            }
                </ul>
            </div>
        </div>
	}
    
</div>

<div class="three columns">

    <dl id="filter" class="sub-nav">
    <dt style="display: block; float: none;">Filter:</dt>
        <dd style="display: block; float: none;" class="active"><a data-filter="*" href="#">All</a></dd>
        @if (Model.Clients.Count > 0)
        {
            <dd style="display: block; float: none;"><a data-filter="Clients" href="#">Clients (@Model.Clients.Count)</a></dd>
        }
        @if (Model.Events.Count > 0)
        {
            <dd style="display: block; float: none;"><a data-filter="Events" href="#">Events (@Model.Events.Count)</a></dd>
        }
        @if (Model.Locations.Count > 0)
        {
            <dd style="display: block; float: none;"><a data-filter="Locations" href="#">Locations (@Model.Locations.Count)</a></dd>
        }
    </dl>
</div>

@section scripts {
    <script>
        $('#filter a').click(function () {
            $('#filter a').parent().removeClass('active');
            $(this).parent().addClass('active');

            var filter = $(this).data("filter");

            if (filter === "*") {
                $('.filterable').slideDown();
            }
            else if (filter === "Clients") {
                $('#Events').slideUp();
                $('#Locations').slideUp();
                $('#Clients').slideDown();
            }
            else if (filter === "Events") {
                $('#Clients').slideUp();
                $('#Locations').slideUp();
                $('#Events').slideDown();
            }
            else if (filter === "Locations") {
                $('#Clients').slideUp();
                $('#Events').slideUp();
                $('#Locations').slideDown();
            }
        });
    </script>
}